Webpack_2-Configuration

cc.
https://doc.webpack-china.org/configuration/

2018.2.8 星期四 19:02

一配置

1.1 选项

二使用不同语言进行配置

2.1 TypeScript

2.2 CoffeeScript

2.3 Babel and JSX

三多种配置类型

除了导出单个配置对象，还有一些方式满足其他需求。

3.1 导出一个函数

最终，你会发现需要在开发和生产构建之间，消除 webpack.config.js 的差异。（至少）有两种选项：

作为导出一个配置对象的替代，还有一种可选的导出方式是，从 webpack 配置文件中导出一个函数。该函数在调用时，可传入两个参数：

环境对象(environment)作为第一个参数。有关语法示例，请查看CLI 文档的环境选项。
一个选项 map 对象（argv）作为第二个参数。这个对象描述了传递给 webpack 的选项，并且具有 output-filename 和 optimize-minimize 等 key。

-module.exports = {
+module.exports = function(env, argv) {
+  return {
+       devtool: env.production ? 'source-maps' : 'eval',
        plugins: [
            new webpack.optimize.UglifyJsPlugin({
+              compress: argv['optimize-minimize'] // 只有传入 -p 或 --optimize-minimize
            })
        ]
+  };
};

3.2 导出一个Promise

webpack 将运行由配置文件导出的函数，并且等待 Promise 返回。便于需要异步地加载所需的配置变量。

module.exports = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                entry: './app.js',
                /* ... */
            })
        }, 5000)
    })
}

$_PS: 实际意义不懂

3.3 导出多个配置对象

作为导出一个配置对象/配置函数的替代，你可能需要导出多个配置对象（从 webpack 3.1.0 开始支持导出多个函数）。当运行 webpack 时，所有的配置对象都会构建。例如，导出多个配置对象，对于针对多个构建目标（例如 AMD 和 CommonJS）打包一个 library 非常有用。

module.exports = [{
    output: {
        filename: './dist-amd.js',
        libraryTarget: 'amd'
    },
    entry: './app.js',
    }, {
    output: {
        filename: './dist-commonjs.js',
        libraryTarget: 'commonjs'
    },
    entry: './app.js',
}]

四入口和上下文

entry 对象是用于 webpack 查找启动并构建 bundle。其上下文是入口文件所处的目录的绝对路径的字符串。

4.1 context

string
基础目录，绝对路径，用于从配置中解析入口起点(entry point)和 loader

context: path.resolve(__dirname, "app")

默认使用当前目录，但是推荐在配置中传递一个值。这使得你的配置独立于 CWD(current working directory - 当前执行路径)。

4.2 entry

string | [string] | object { : string | [string] } | (function: () => string | [string] | object { : string | [string] })

起点或是应用程序的起点入口。从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。
动态加载的模块不是入口起点。

简单规则：每个 HTML 页面都有一个入口起点。单页应用(SPA)：一个入口起点，多页应用(MPA)：多个入口起点。

entry: {
    home: "./home.js",
    about: "./about.js",
    contact: "./contact.js"
}

4.3 命名

如果传入一个字符串或字符串数组，chunk 会被命名为 main。如果传入一个对象，则每个键(key)会是 chunk 的名称，该值描述了 chunk 的入口起点。

4.4 动态入口

entry: () => './demo'

或

entry: () => new Promise((resolve) => resolve(['./demo', './demo2']))

当结合 output.library 选项时：如果传入数组，则只导出最后一项。

五输出

5.1

5.2

5.3

5.4

5.5

5.

六模块(Module)

6.1 module.noParse

防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import, require, define 的调用，或任何其他导入机制。忽略大型的 library 可以提高构建性能。

6.2 module.rules

6.3 Rule

每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)。

1 Rule条件

条件有两种输入值：

resource：请求文件的绝对路径。它已经根据 resolve 规则解析。
issuer: 被请求资源(requested the resource)的模块文件的绝对路径。是导入时的位置。
例如: 从 app.js 导入 ‘./style.css’，resource 是 /path/to/style.css. issuer 是 /path/to/app.js。

在规则中，属性 test, include, exclude 和 resource 对 resource 匹配，并且属性 issuer 对 issuer 匹配。

当使用多个条件时，所有条件都匹配。

小心！resource 是文件的解析路径，这意味着符号链接的资源是真正的路径，而不是符号链接位置。在使用工具来符号链接包的时候（如 npm link）比较好记，像 /node_modules/ 等常见条件可能会不小心错过符号链接的文件。

2 Rule 结果

规则结果只在规则条件匹配时使用。
规则有两种输入值：

应用的 loader：应用在 resource 上的 loader 数组。
Parser 选项：用于为模块创建解析器的选项对象。
这些属性会影响 loader：loader, options, use。
也兼容这些属性：query, loaders。

enforce 属性会影响 loader 种类。不论是普通的，前置的，后置的 loader。
parser 属性会影响 parser 选项。

3 嵌套的 Rule

可以使用属性 rules 和 oneOf 指定嵌套规则。
这些规则用于在规则条件(rule condition)匹配时进行取值。

6.4 Rule.enforce

可能的值有：”pre” | “post”
指定 loader 种类。没有值表示是普通 loader。

还有一个额外的种类”行内 loader”，loader 被应用在 import/require 行内。

所有 loader 通过前置, 行内, 普通, 后置排序，并按此顺序使用。

所有普通 loader 可以通过在请求中加上 ! 前缀来忽略（覆盖）。
所有普通和前置 loader 可以通过在请求中加上 -! 前缀来忽略（覆盖）。
所有普通，后置和前置 loader 可以通过在请求中加上 !! 前缀来忽略（覆盖）。
不应该使用行内 loader 和 ! 前缀，因为它们是非标准的。它们可在由 loader 生成的代码中使用。

6.5 Rule.exclude

Rule.exclude 是 Rule.resource.exclude 的简写。如果你提供了 Rule.exclude 选项，就不能再提供 Rule.resource。详细请查看 Rule.resource 和 Condition.exclude。

6.6 Rule.include

Rule.include 是 Rule.resource.include 的简写。如果你提供了 Rule.include 选项，就不能再提供 Rule.resource。详细请查看 Rule.resource 和 Condition.include。

6.7 Rule.issuer

一个条件，用来与被发布的 request 对应的模块项匹配。在以下示例中，a.js request 的发布者(issuer)是 index.js 文件的路径。

index.js

import A from ‘./a.js’
这个选项可以用来将 loader 应用到一个特定模块或一组模块的依赖中。

6.8 Rule.loader

Rule.loader 是 Rule.use: [ { loader } ] 的简写。详细请查看 Rule.use 和 UseEntry.loader。

6.9 Rule.loaders

由于需要支持 Rule.use，此选项已废弃。
Rule.loaders 是 Rule.use 的别名。详细请查看 Rule.use。

6.0 Rule.oneOf

规则数组，当规则匹配时，只使用第一个匹配规则。

{
    test: /.css$/,
    oneOf: [
        {
        resourceQuery: /inline/, // foo.css?inline
        use: 'url-loader'
        },
        {
        resourceQuery: /external/, // foo.css?external
        use: 'file-loader'
        }
    ]
}

6.1 Rule.options/Rule.query

Rule.options 和 Rule.query 是 Rule.use: [ { options } ] 的简写。详细请查看 Rule.use 和 UseEntry.options。

由于需要支持 Rule.options 和 UseEntry.options，Rule.use，Rule.query 已废弃。

6.2 Rule.parser

解析选项对象。所有应用的解析选项都将合并。
解析器(parser)可以查阅这些选项，并相应地禁用或重新配置。大多数默认插件，会如下解释值：

将选项设置为 false，将禁用解析器。
将选项设置为 true，或不修改将其保留为 undefined，可以启用解析器。

然而，一些解析器(parser)插件可能不光只接收一个布尔值。例如，内部的 NodeStuffPlugin 差距，可以接收一个对象，而不是 true，来为特定的规则添加额外的选项。

示例（默认的插件解析器选项）：

parser: {
    amd: false, // 禁用 AMD
    commonjs: false, // 禁用 CommonJS
    system: false, // 禁用 SystemJS
    harmony: false, // 禁用 ES2015 Harmony import/export
    requireInclude: false, // 禁用 require.include
    requireEnsure: false, // 禁用 require.ensure
    requireContext: false, // 禁用 require.context
    browserify: false, // 禁用特殊处理的 browserify bundle
    requireJs: false, // 禁用 requirejs.*
    node: false, // 禁用 __dirname, __filename, module, require.extensions, require.main 等。
    node: {...} // 在模块级别(module level)上重新配置 node 层(layer)
}

6.3 Rule.resource

条件会匹配 resource。既可以提供 Rule.resource 选项，也可以使用快捷选项 Rule.test，Rule.exclude 和 Rule.include。在 Rule 条件中查看详细。

6.4 Rule.resourceQuery

{
    test: /.css$/,
    resourceQuery: /inline/,
    use: 'url-loader'
}

6.5 Rule.rules

6.6 Rule.test

Rule.test 是 Rule.resource.test 的简写。如果你提供了一个 Rule.test 选项，就不能再提供 Rule.resource。详细请查看 Rule.resource 和 Condition.test。

6.7 Rule.use

应用于模块的 UseEntries 列表。每个入口(entry)指定使用一个 loader。
传递字符串（如：use: [ “style-loader” ]）是 loader 属性的简写方式（如：use: [ { loader: “style-loader “} ]）。
Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured).

use: [
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            importLoaders: 1
        }
    },
    {
        loader: 'less-loader',
        options: {
            noIeCompat: true
        }
    }
]

6.8 条件

条件可以是这些之一：

字符串：匹配输入必须以提供的字符串开始。是的。目录绝对路径或文件绝对路径。
正则表达式：test 输入值。
函数：调用输入的函数，必须返回一个真值(truthy value)以匹配。
条件数组：至少一个匹配条件。
对象：匹配所有属性。每个属性都有一个定义行为。

{ test: Condition }：匹配特定条件。一般是提供一个正则表达式或正则表达式的数组，但这不是强制的。
{ include: Condition }：匹配特定条件。一般是提供一个字符串或者字符串数组，但这不是强制的。
{ exclude: Condition }：排除特定条件。一般是提供一个字符串或字符串数组，但这不是强制的。
{ and: [Condition] }：必须匹配数组中的所有条件
{ or: [Condition] }：匹配数组中任何一个条件
{ not: [Condition] }：必须排除这个条件

示例:

{
    test: /\.css$/,
    include: [
        path.resolve(__dirname, "app/styles"),
        path.resolve(__dirname, "vendor/styles")
    ]
}

6.9 UseEntry

6.0 模块上下文

Avoid using these options as they are deprecated and will soon be removed. 避免使用这些选项，因为它们已废弃，并将很快删除。

module: {
    exprContextCritical: true,
    exprContextRecursive: true,
    exprContextRegExp: false,
    exprContextRequest: ".",
    unknownContextCritical: true,
    unknownContextRecursive: true,
    unknownContextRegExp: false,
    unknownContextRequest: ".",
    wrappedContextCritical: false
    wrappedContextRecursive: true,
    wrappedContextRegExp: /.*/,
    strictExportPresence: false // since webpack 2.3.0
}

$_PS: 上面两个什么鬼

19:57

七解析

7.1

7.2

7.3

7.4

7.5

7.

八插件

8.1 plugins

九开发中Server(DevServer)

9.1

9.2

9.3

9.4

9.

零 Devtool

0.1 devtool

0.2 Qualities

0.3 Development

0.4 Special cases

0.5 Production

一构建目标

1.1 target

1.2 string

1.3 function

二 Watch和WatchOptions

2.1 watch

2.2 watchOptions

2.3 watchOptions.aggregated

2.4 watchOptions.ignored

2.5 watchOptions.poll

三外部扩展(Externals)

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer’s environment)中的依赖。此功能通常对 library 开发人员来说是最有用的，然而也会有各种各样的应用程序用到它。

用户(consumer)，在这里是指，引用了「使用 webpack 打包的 library」的所有终端用户的应用程序(end user application)。

3.1 externals

string array object function regex

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

例如，从 CDN 引入 jQuery，而不是把它打包：
index.html

<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>

webpack.config.js

externals: {
    jquery: 'jQuery'
}

这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行：

import $ from 'jquery';
$('.my-element').animate(...);

具有外部依赖(external dependency)的 bundle 可以在各种模块上下文(module context)中使用，例如 CommonJS, AMD, 全局变量和 ES2015 模块。外部 library 可能是以下任何一种形式：

root：可以通过一个全局变量访问 library（例如，通过 script 标签）。
commonjs：可以将 library 作为一个 CommonJS 模块访问。
commonjs2：和上面的类似，但导出的是 module.exports.default.
amd：类似于 commonjs，但使用 AMD 模块系统。
可以接受各种语法……
1 string
请查看上面的例子。属性名称是 jquery，表示应该排除 import $ from ‘jquery’ 中的 jquery 模块。为了替换这个模块，jQuery 的值将被用来检索一个全局的 jQuery 变量。换句话说，当设置为一个字符串时，它将被视为全局的（定义在上面和下面）。
$_PS: ？意思是import $ from 'jquery'仍然需要,不从模块引了，而检索全局
2 array
3 object
4 funciton
5 regex

一 配置